<template>
   <div class="cart">     
     <el-table
       :data="tableData"
       border
       style="width: 100%"
     >
       <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
       <el-table-column prop="name" label="书名" align="center"></el-table-column>
       <el-table-column prop="price" label="价格" width="100" align="center"></el-table-column>
       <el-table-column label="数量" align="center">
         <template slot-scope="scope">
           <el-input-number v-model="scope.row.number" :min="1" :max="scope.row.pnum" label="描述文字" @change="change(scope.row.number,scope.$index)"></el-input-number>
         </template>
       </el-table-column>
       <el-table-column label="小计" width="150" align="center">
         <template slot-scope="scope">
           {{tableData[scope.$index].lineTotal}}
         </template>
       </el-table-column>
       <el-table-column label="操作"  width="180" align="center">
         <template slot-scope="scope">
           <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>     
     <div class="total_warpper">
       <h3>共计：{{totalPrice}}</h3>
       <h3>总数：{{totalNumber}}</h3>
     </div>
     <div class="group_btn">
       <el-button type="success" @click="commitOrder()">提交订单</el-button>
     </div>
     
   </div>
 </template>
 
 <script>
 export default {
   data() {
     return {       
       //表格中的数据
       tableData: [
       ]
     };
   },
   mounted(){
     for (let i = 0; i < this.$store.state.cart.length; i++) {
	      this.tableData.push(JSON.parse(JSON.stringify(this.$store.state.cart[i])))
	    }
   },
   methods: {
       change(val,index){
           console.log(index+':'+val);
           this.tableData[index].lineTotal=val*this.tableData[index].price;
       },
    commitOrder(){

    },    
     handleDelete(index, row) {
       this.tableData.splice(index, 1); //删除表格的数据
       this.$store.state.cart.splice(index,1)
     },
   },          
   // 通过computed计算属性及时改变
   computed: {     
     // 总价
     totalPrice() {
       var price_total = 0;
       for (var i = 0; i < this.tableData.length; i++) {
         price_total +=
           this.tableData[i].price * this.tableData[i].number;
       }
       return price_total;
     },
     // 总数
     totalNumber() {
       var number_total = 0;
       for (var i = 0; i < this.tableData.length; i++) {
         number_total += this.tableData[i].number;
       }
       return number_total;
     }
   }
 };
 </script>
 
 <style scoped>
 .cart {
   margin: 50px auto;
   width: 1000px;
 }
 .group_btn {
   margin-bottom: 30px;
 }
 .addDialog .el-input {
   width: 90%;
 }
 .total_warpper {
   text-align: right;
   margin-top: 30px;
 }
 h3 {
   margin-top: 10px;
 }
 </style> 